<template>
  <div tabindex="0" :class="warpClass" :style="formItemStyles" v-clickoutside="handleClose" >
    <!--ref="select"
    :class="warpClass"
    :disabled="disabled"
    :placeholder="placeholder"
    :data="currentData"
    :loading="currentLoading"
    remote
    :size="size"
    :placement="placement"
    auto-complete
    :doValidate="false"
    @change="handleChange"
    @clear="handleClear"
    :transfer="transfer">-->
    <!--label-->
    <label :class="labelClasses"
           :for="elementId"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <div ref="reference">
      <aty-input
        :element-id="elementId"
        v-model="currentValue"
        v-bind="inputAttrs"
        v-on="inputListeners"/>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses"
         :style="errorTipStyles"
         v-if="isShowMessage">
      {{validateMessage}}
    </div>
    <transition name="transition-drop">
      <Drop :class="dropdownCls"
            v-if="dropLoaded"
            v-show="visible"
            :placement="placement"
            ref="dropdown"
            :data-transfer="transfer"
            :width="dropdownWidth"
            v-transfer-dom>
        <ul v-show="notFound" :class="[$options.name + '-not-found']"><li>{{ notFoundText }}</li></ul>
        <ul v-show="!notFound"
            :style="dropDownListStyles">
          <template v-if="simple">
            <li class="aty-select-item" :key="item" v-for="(item, index) in currentData" @click="select(item)">
              <slot :data="item" :index="index">
                <span :title="delHTMLTag(item)" v-html="item"></span>
              </slot>
            </li>
          </template>
          <template v-else>
            <li class="aty-select-item" :key="item.name" v-for="(item, index) in currentData" @click="select(item)">
              <slot :data="item" :index="index">
                <span :title="delHTMLTag(item.name)" v-html="item.name"></span>
              </slot>
            </li>
          </template>
        </ul>
      </Drop>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
